[Gather.town]指定の位置に参加者全員を一列に並べる方法

• t_o_dと申します。
• 円滑なリモートコミュニケーションの促進の一環としてGather.townを利用しています。
• Gather.townは基本機能以外の仕掛けが沢山ありますが、その中の1つがブラウザコンソールで扱えるSocket APIの存在です。
• 「現在位置の取得」や「参加者情報の取得」など豊富に存在しており、それらを適切に組み合わせることで色々な操作を行うことが可能です。
• 今回はその中から指定の位置に参加者を一列に並べる方法を記録いたします。

手順

移動位置の確認

• 以下のようにマップ内のどこに移動させるかを決めておく。

移動位置の座標の取得

• まず移動させる位置まで行き、以下の1行をChromeコンソール画面に入力して位置の座標を取得します。
  • ユーザーIDはgame.playersを実行することで確認可能です。

gameSpace.gameState.ユーザーID

• 実行後、表示されるx座標とy座標の数値をメモしておきます。

横一列に並べる

• 横一列に並べるには、以下の数行をChromeコンソール画面に入力して実行するだけです。
  • ※実行には権限が必要です。

const mapId = gameSpace.mapId
let x = 7; // メモしたx座標
let y = 19; // メモしたy座標
game.playerUidsSeenOnConnect.forEach(p => {
    game.teleport(mapId,x,y,p);
    x++;
})

• 以下のように横1列に並んでいることを確認します。

縦一列に並べる

• 縦一列に並べるには、以下の数行をChromeコンソール画面に入力して実行するだけです。
  • ※実行には権限が必要です。

const mapId = gameSpace.mapId
let x = 7; // メモしたx座標
let y = 19; // メモしたy座標
game.playerUidsSeenOnConnect.forEach(p => {
    game.teleport(mapId,x,y,p);
    y++;
})

• 以下のように縦1列に並んでいることを確認します。

内容

• 上記のスクリプトは以下のGather.townで用意されているSocket APIを利用しています。
  • gameSpace.mapId : 現在位置のマップID
  • game.playerUidsSeenOnConnect : 参加している人のID一覧。Setオブジェクトで取得されます。
  • game.teleport(マップID,移動位置のx座標,移動位置のy座標,対象者ID) : 対象者の移動。
• つまり「参加者一覧」を取得してループで回して逐次移動処理を行うというスクリプトとなっております。

補足

• 他の操作の情報はこちらのサイトから確認できます。
• より詳細な情報を知るためには、以下のようにコンソール画面で「game」「gameSpace」を入力して実行すれば確認できます。

まとめ

• こうした基本機能以外に提供されているものを利用してより良いリモートコミュニケーションの促進につながると実感しました。
• 今回扱った機能以外にも豊富なメソッドやプロパティがあるので、適切に組み合わせて節度ある利用を行おうと思います。

参考

• Gather-Websocket-API

アノテーション株式会社について

アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。少しでもご興味あれば、アノテーション株式会社WEBサイトをご覧ください。